<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <div id="container">

  </div>

  <script>

    var width = 500, height = 250, margin = { left: 30, top: 30, right: 30, bottom: 30 };

    var g_width = width - margin.left - margin.right;
    var g_height = height - margin.top - margin.bottom;

    d3.select("#container").append('svg')
      .attr('width', width)
      .attr('height', height)
      .style("background", '#efefef');

    var g = d3.select('svg').append('g');

    var data = [2, 4, 2, 4, 2, 4, 2];
    var xScale = d3.scaleLinear().domain([0, d3.max(data)]).range([0, g_width]);
    var yScale = d3.scaleLinear().domain([0, d3.max(data)]).range([g_height, 0])

    var area_fenerator = d3.area()
      .x(function (d, i) {
        return xScale(i)+margin.left;
      }).y1(function (d) {
        return yScale(d);
      }).y0(g_height+margin.top)
      .curve(d3.curveMonotoneX)
      ;

      g.append('path')
      .attr('d',area_fenerator(data))
      .attr('fill','green')


    //x轴
    g.append('g').call(
      d3.axisBottom(xScale)
        .ticks(6)
    )
      .attr('transform', `translate(${margin.left},${g_height + margin.top})`)

    //y轴
    g.append('g').call(
      d3.axisLeft(yScale)
    )
      .attr('transform', `translate(${margin.left},${margin.top})`)


    g.append('text')
      .text('价格')
      .attr('x', margin.left)
      .attr('y', margin.top)
      .attr('transform', "rotate(-90)")
      // .attr("dy","1em")
      // .attr("dx","-3.5em")
      .attr('text-anchor', "end")


  </script>

</body>

</html>